<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            /*background: cornsilk;*/
        }

        form{
            margin:80px auto 0;
            padding-bottom:50px;
        }
        form .input-row{
            padding-left: 80px;
            position: relative;
            line-height: 40px;

        }
        form .input-row label{
            display:inline-block;
            width: 68px;
            text-align: right;
            margin-left:300px;

        }
        form .input-row input{
            height: 35px;
            border-radius: 4px;
            width:300px;
            overflow: hidden;
            border: 1px solid #ddd;
            text-indent: 10px;
        }
        #submit{
            width:370px;
            background-color: #c61012;
            color: #fff;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            margin: 20px 0 0 380px;
            font-size: 18px;
            text-align:center;
            display: block;
            text-decoration: none;
            border: none;
        }
        #submit:active{
            background-color: #0c8dbc;
        }
        .mmqd{
            width: 290px;
            height: 30px;
            background-color:rgba(255, 120, 14, 0.58);
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 16px;
        }
        .active{
            background-color: #ff780e;
        }
        .mmqd em{
            display: inline-block;
            width: 33.333%;
            text-align: center;
            color: #fff;

        }
    </style>
    <style>
        ul.list-group.list-group-1 {
            text-align: right;
            padding: 5px 30px 0 0;
            background: #eee;
        }
        li.list-group-item.list1 {
            display: inline-block;
            border: 0;
            background: #eee;
        }

        ul.list-group.list-group-1 a{
            color: #0e0e0e;

        }
        /******login弹出层样式****/

        .form{
            width: 350px;
            background-color: #fff;
            height: 220px;
            margin: 10px auto;
        }
        .form>div{
            position: relative;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .form>div input{
            width: 100%;
            height: 35px;
            border-radius: 3px;
            border: 1px solid #ddd;
            text-indent: 40px;
        }
        .form>div label{
            position: absolute;
            left: 0;
            top:10px;
            width: 30px;
            text-align: right;
            color: #808080;
        }
        .form .yanzhengma input{
            width: 50%;
            text-indent: 10px;
        }
        .form .yanzhengma img{
            height: 30px;
            width: 75px;
            font-size: 0;
            vertical-align: middle;
        }
        .form .yanzhengma a{
            font-size: small;
            text-decoration: none;
            color: #00a5e0;
        }
        .form>div.chk label{
            width: 100px;
            padding-left: 20px;
        }
        .form>div.chk input{
            width: 22px;
            height: 22px;
            margin-top: 8px;
        }
        .form>div.chk a{
            float: right;
            margin-top: 9px;
            text-decoration: none;
            color: #00a5e0;
        }
        .buts button{
            width: 48%;
            float: left;
        }
        .buts button:first-child{
            margin-right: 4%;
        }
    </style>
</head>
<body>
<ul class="list-group list-group-1" id="top-part">
    <li class="list-group-item list1"><a href="./index.jsp"><i class="fa fa-home"></i> 首页</a></li>
        <c:if test="${empty user }">
            <li class="list-group-item list1">登录【<a href="" data-toggle="modal" data-target="#myModalLogin" style="font-size: small;color:#e4393c ">请登录</a>】</li>
            </c:if>
                <li role="presentation" class="dropdown list-group-item list1">
                    <c:if test="${!empty user }">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <img src="${user.headImg }" style="border-radius: 50%;width: 25px;height: 25px;"/><b>${user.nickname }</b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="user.jsp">个人设置</a></li>
                        <li><a href="#">切换账号</a></li>
                        <li><a href="../logout">退出</a></li>
                    </ul>
                    <c:if test="${user.role == 1}">
                <li class="list-group-item list1"><a href="../backend/main.jsp"><i class="fa fa-cog"></i> 后台管理</a></li>
            </c:if>
        </c:if>
    </li>
    <li class="list-group-item list1"><a href="../myCartServlet"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="color:#c63205"></span> 购物车</a></li>
    <li class="list-group-item list1"><a href="../selectOrder"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 我的订单</a></li>
</ul>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">欢迎登陆</h4>
            </div>
            <div class="modal-body">
                <form action="../login.do" class="form">
                    <div class="name">
                        <label for="loginname"><span class="glyphicon glyphicon-user"></span></label>
                        <input type="text" placeholder="用户名" id="loginname"  name="loginname">
                    </div>
                    <div class="password">
                        <label for="pwd"><span class="glyphicon glyphicon-lock"></span></label>
                        <input type="password" placeholder="请输入密码"  id="pwd" name="pwd">
                    </div>
                    <div class="yanzhengma">
                        <input type="text" placeholder="输入验证码"  id="yanzhengma" name="yanzhengma" width="50%">
                        <img src="images/yanzhengma.JPG" alt="" height="35" width="80">
                        <a href="#">换一张</a>
                    </div>
                    <div class="chk">
                        <label for="ch1" width="60px">10天免登陆</label>
                        <input type="checkbox" id="ch1">
                        <a href="register.jsp">免费注册</a>
                    </div>
                    <div class="buts">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <form action="../register" method="post" id="form">
        <div class="input-row">
            <label>
                用户名
            </label>
            <input type="text" name="userName" id="name" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="nameRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                登录密码
            </label>
            <input type="password" name="password" id="password" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="passwordRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="mmqd" style="margin-left: 455px">
            <em class="active">弱</em><em>中</em><em>强</em>
        </div>
        <div class="input-row">
            <label>
                密码确认
            </label>
            <input type="password" id="passwordAgain" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="passwordAgainRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                联系方式
            </label>
            <input type="text" name="mobile" id="mobile" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="mobileRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                E-mail
            </label>
            <input type="text" name="email" id="email" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="emailRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                昵称
            </label>
            <input type="text" name="nickname" id="nickname" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="nicknameRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                真实姓名
            </label>
            <input type="text" name="realName" id="realName" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="realNameRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <button type="submit" id="submit" >立即注册</button>
<%--        <a href="javascript:void(0);" id="submit"></a>--%>
    </form>
</div>


</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#name").blur(function() {
            var name = this.value;
            name = $.trim(name);
            if (name == "") {
                $("#nameRequierdSpan").text("用户名不能为空");
            } else {
                if(name.length<2 || name.length>10){
                    $("#nameRequierdSpan").text("用户名要在2到10位之间");
                }
            }
        });
        $("#nickname").blur(function() {
            var nickname = this.value;
            nickname = $.trim(nickname);
            if (nickname == "") {
                $("#nicknameRequierdSpan").text("昵称不能为空");
            }
        });
        $("#realName").blur(function() {
            var realName = this.value;
            realName = $.trim(realName);
            if (realName == "") {
                $("#realNameRequierdSpan").text("真实姓名不能为空");
            }
        });
        var aEm=document.getElementsByTagName('em');
        var pwd=document.getElementById("password");
        pwd.onkeyup=function(){
            if(this.value.length>6){
                aEm[1].className="active";
            }else {
                aEm[1].className="";
            }
            if(this.value.length>15){
                aEm[2].className="active";
            }else {
                aEm[2].className="";
            }
        }
        $("#password").blur(function() {
            var password=this.value;
            password=$.trim(password);
            if(password==""){
                $("#passwordRequierdSpan").text("密码不能为空");
            }else{
                if(password.length<6 || password.length>26){
                    $("#passwordRequierdSpan").text("密码要在6到26位之间");
                }else{
                    var regExp = /^[A-Za-z0-9]+$/;
                    var ok = regExp.test(password);
                    if(!ok){
                        $("#passwordRequierdSpan").text("密码不能含有特殊字符");
                    }else{
                        $("#passwordRequierdSpan").text("");
                    }
                }
            }
        });
        $("#passwordAgain").blur(function(){
            var passwordAgain=this.value;
            var password=$("#password").val();
            if(passwordAgain==password){
                $("#passwordAgainRequierdSpan").text("");
            }else{
                $("#passwordAgainRequierdSpan").text("确认密码与密码不符");
            }
        });
        $("#mobile").blur(function() {
            var mobile=this.value;
            mobile=$.trim(mobile);
            if(mobile==""){
                $("#mobileRequierdSpan").text("电话号码不能为空");
            }else{
                var regExp = /^1[2-9]\d{9}$/;
                var ok = regExp.test(mobile);
                if(!ok){
                    $("#mobileRequierdSpan").text("电话号码格式不正确");
                }else{
                    $("#mobileRequierdSpan").text("");
                }
            }
        });
        $("#email").blur(function() {
            var email=this.value;
            email=$.trim(email);
            if(email==""){
                $("#emailRequierdSpan").text("邮箱不能为空");
            }else{
                var regExp = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                var ok = regExp.test(email);
                if(!ok){
                    $("#emailRequierdSpan").text("邮格式不正确");
                }else{
                    $("#emailRequierdSpan").text("");
                }
            }
        });
        $("#submit").click(function(){
            $(".require").blur();
            var flag=true;
            $.each($(".requierdSpan"),function(i,n){
                if(this.innerHTML!=""){
                    flag=false;
                    return false;
                }
            });
            if(!flag){
                $("#message").text("数据非法请检查!");
            }else{
                $("#form").submit();
            }
        });
    });
</script>
</html>
